<template>
  <div id="treeData">
    <div ref="tree" class="tree"></div>
  </div>
</template>

<script>
export default {
  name: "treeData",
  components: {},
  props: {
    Data: Array | Object,
    type1: Array | Object,
    type2: Array | Object,
  },
  data() {
    return {};
  },
  components: {},
  watch: {
    Data: {
      handler() {
        this.drawTree();
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.drawTree();
  },
  methods: {
    drawTree() {
      let that = this;
      let tree = that.$echarts.init(that.$refs.tree);
      let option = {
        color: ["#fff1e8"],
        tooltip: {
          formatter: function (a) {
            return (
              `${a.data.category_name}` +
              "\n" +
              `${that.type1}` +
              ":" +
              `${that.format_num(a.data.amount)}`
            );
          },
        },

        series: [
          {
            type: "treemap",
            data: that.Data,
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            leafDepth: 1,
            width: "100%",
            height: "100%",
            roam: false, //是否开启拖拽漫游（移动和缩放）
            nodeClick: true,
            visibleMin: 1,
            squareRatio: 1.618033988749895,
            label: {
              fontSize: 14,
              color: "#222222",
              fontWeight: 600,
              show: true,
              //distance: 0,
              // padding: 20,
              // position: "80 80",
              // zoomToNodeRatio: 0,
              formatter: function (a) {
                return (
                  `${a.data.category_name}` +
                  "\n" +
                  `{x|${that.type1}}` +
                  "{x|:}" +
                  `{x|${that.format_num(a.data.amount)}}`
                );
              },
              rich: {
                x: {
                  color: "#555555",
                  lineHeight: 30,
                  fontSize: 12,
                },
              },
            },

            // drillDownIcon: false, //当节点可以下钻时的提示符
            itemStyle: {
              color: null,
              colorAlpha: null,
              colorSaturation: null,
              borderWidth: 5,
              gapWidth: 0,
              borderColor: "#fff",
              borderColorSaturation: null,
            },
            emphasis: {
              focus: "series",
              blurScope: "series",
              itemStyle: {
                color: "#fff1e8",
              },
            },
            breadcrumb: {
              //底层显示层级关系的面包屑,默认开启
              show: false,
              left: "center",
              top: "bottom",
              height: 20,
              itemStyle: {
                color: "#fff1e8",
                borderColor: "#fff",
                textStyle: {
                  color: "#222",
                },
              },
            },
          },
        ],
      };

      tree.setOption(option);
      tree.on("click", this.treeNodeclick);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          tree.resize();
        });
      }, 200);
    },
    // 节点点击事件
    treeNodeclick(param) {
      if (param.data) {
        this.$emit("cateID", param.data.id);
        this.$emit("indexes", param.data.indexes);
        this.$emit("listTitle", param.data.category_name);
      }
    },
  },
  computed: {},
};
</script>

<style scoped lang="less">
#treeData {
  // max-width: 1330px;
  margin-top: 10px;
  .tree {
    width: 100%;
    height: 659px;
  }
}
</style>
